<template>
    <view class="page">
        <u-swiper :list="list" indicatorStyle="right: 20px" height="360"
                  @change="swiperAction">
            <view slot="indicator" class="indicator-num">
                <text class="indicator-num__text">{{ currentNum + 1 }}/{{ list.length }}</text>
            </view>
        </u-swiper>

        <view class="content">
            <u-text v-if="info.type===1" :text="'整租-'+info.s_address + info.s_name" size="20" color="#000" bold></u-text>
            <u-text v-if="info.type===2" :text="'合租-'+info.s_address + info.s_name" size="20" color="#000" bold></u-text>
            <u-text v-if="info.type===3" :text="'公寓-'+info.s_address + info.s_name" size="20" color="#000" bold></u-text>
            <view class="_type">
                <view class="__bdi">
                    <view class="price">{{info.lease_priec}}元/月</view>
                    <view class="types">押{{info.distribution_info.deposit}}付{{info.distribution_info.cope_with}}</view>
                </view>
                <view class="__bdi" style="border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;">
                    <view class="price">{{info.section}}室{{info.office}}厅{{info.hygiene}}卫</view>
                    <view class="types">户型</view>
                </view>
                <view class="__bdi">
                    <view class="price">{{info.area}}㎡</view>
                    <view class="types">面积</view>
                </view>
            </view>
            <view class="tags">
                <view style="margin: 5px 10px" v-for="(item,index) in info.public_special_info">
                    <u-tag :text="item.name" plain type="warning"></u-tag>
                </view>
                <!--<view style="margin: 5px 10px"><u-tag text="月付" plain type="warning"></u-tag></view>-->
                <!--<view style="margin: 5px 10px"><u-tag text="房东直租" plain type="warning"></u-tag></view>-->
                <!--<view style="margin: 5px 10px"><u-tag text="近地铁" plain type="warning"></u-tag></view>-->
                <!--<view style="margin: 5px 10px"><u-tag text="有阳台" plain type="warning"></u-tag></view>-->
                <view style="margin: 5px 10px">
                    <u-tag text="智能门锁:有" v-if="parseInt(info.lock_type)===2" plain type="warning"></u-tag>
                    <u-tag text="智能门锁:无" v-else plain type="warning"></u-tag>
                </view>
                <view style="margin: 5px 10px"><u-tag :text="'朝向:'+info.orientation" plain type="warning"></u-tag></view>
                <view style="margin: 5px 10px">
                    <u-tag :text="info.is_elveator === 1 ? '电梯:有':'电梯:无' " plain type="warning"></u-tag>
                </view>

                <view style="margin: 5px 10px"><u-tag :text="info.distribution_info.lease_term + '个月起租'" plain type="warning"></u-tag></view>
                <view style="margin: 5px 10px" v-if="linesname!==undefined">
                    <u-tag :text="'近地铁：' + linesname + stationname + '站'" plain type="warning"></u-tag>
                </view>
            </view>
            <!--<u-row>-->
                <!--<u-text text="楼层：层"></u-text>-->
                <!--<u-text :text="'电梯：'+ info.is_elveator === 1 ? '有':'无' "></u-text>-->
            <!--</u-row>-->

            <u-text text="房屋设施" size="18" color="#000" bold margin="20px 0"></u-text>
            <u-grid :border="false" col="5" align="center" v-if="info.config_info.length > 0">
                <template v-for="(item,index) in info.config_info">
                    <u-grid-item v-if="item.name === '空调'">
                        <u-icon :customStyle="{paddingTop:20+'rpx'}" size="22" name="/static/icon/xuehua.png"></u-icon>
                        <text class="grid-text">空调</text>
                    </u-grid-item>

                    <u-grid-item v-if="item.name === '床'">
                        <u-icon :customStyle="{paddingTop:20+'rpx'}" size="22" name="/static/icon/chuang.png"></u-icon>
                        <text class="grid-text">床</text>
                    </u-grid-item>
                    <u-grid-item v-if="item.name === '桌子'">
                        <u-icon :customStyle="{paddingTop:20+'rpx'}" size="22" name="/static/icon/jiaju-shuzhuo.png"></u-icon>
                        <text class="grid-text">桌子</text>
                    </u-grid-item>
                    <u-grid-item v-if="item.name === '衣柜'">
                        <u-icon :customStyle="{paddingTop:20+'rpx'}" size="22" name="/static/icon/yigui.png"></u-icon>
                        <text class="grid-text">衣柜</text>
                    </u-grid-item>
                    <u-grid-item v-if="item.name === '阳台'">
                        <u-icon :customStyle="{paddingTop:20+'rpx'}" size="22" name="/static/icon/yangtai.png"></u-icon>
                        <text class="grid-text">阳台</text>
                    </u-grid-item>
                    <u-grid-item v-if="item.name === '卫生间'">
                        <u-icon :customStyle="{paddingTop:20+'rpx'}" size="22" name="/static/icon/peitaosheshixiaotubiao_duliweishengjian.png"></u-icon>
                        <text class="grid-text">卫生间</text>
                    </u-grid-item>
                    <u-grid-item v-if="item.name === '独卫'">
                        <u-icon :customStyle="{paddingTop:20+'rpx'}" size="22" name="/static/icon/peitaosheshixiaotubiao_duliweishengjian.png"></u-icon>
                        <text class="grid-text">独卫</text>
                    </u-grid-item>
                    <u-grid-item v-if="item.name === 'WIFI'">
                        <u-icon :customStyle="{paddingTop:20+'rpx'}" size="22" name="/static/icon/wifi.png"></u-icon>
                        <text class="grid-text">WIFI</text>
                    </u-grid-item>
                    <u-grid-item v-if="item.name === '热水器'">
                        <u-icon :customStyle="{paddingTop:20+'rpx'}" size="22" name="/static/icon/ranqireshuiqi.png"></u-icon>
                        <text class="grid-text">热水器</text>
                    </u-grid-item>
                    <u-grid-item v-if="item.name === '洗衣机'">
                        <u-icon :customStyle="{paddingTop:20+'rpx'}" size="22" name="/static/icon/xiyiji.png"></u-icon>
                        <text class="grid-text">洗衣机</text>
                    </u-grid-item>
                    <u-grid-item v-if="item.name === '冰箱'">
                        <u-icon :customStyle="{paddingTop:20+'rpx'}" size="22" name="/static/icon/bingxiang.png"></u-icon>
                        <text class="grid-text"> 冰箱</text>
                    </u-grid-item>
                </template>
            </u-grid>

            <u-text text="招租说明" size="18" color="#000" bold margin="20px 0"></u-text>

            <u-read-more ref="uReadMore1" showHeight="200" closeText="更多" color="#606266" textIndent="0">
                <u-parse :content="info.distribution_info.rent_msg" @load="load1"></u-parse>
            </u-read-more>

            <u-text text="费用说明" size="18" color="#000" bold margin="20px 0"></u-text>

            <u-read-more ref="uReadMore2" showHeight="200" closeText="更多" color="#606266" textIndent="0">
                <u-parse :content="info.distribution_info.cost_msg" @load="load2"></u-parse>
            </u-read-more>

            <view class="user">
                <view class="info">
                    <u-avatar :src="info.user_avatar" shape="square"></u-avatar>
                    <view class="name">
                        <u-text :text="info.user_nickname" bold></u-text>
                        <u-gap height="8"></u-gap>
                        <!--<u-tag text="店铺2 年" type="warning" size="mini" plain icon="home-fill"></u-tag>-->
                    </view>
                </view>
                <u-tag text="立即联系" type="warning" size="large" icon="phone" shape="circle" plain @click="telHandler"></u-tag>
            </view>

            <u-text text="同小区房源" size="18" color="#000" bold margin="20px 0"></u-text>

            <scroll-view class="_dbox" scroll-x="true">
                <view class="__ruby" v-for="(item,index) in info.small_area_house">
                    <view class="Imges">
                        <image :src="item.room_img" mode=""></image>
                    </view>
                    <view class="tenanone" v-if="item.type===1">整租-{{item.s_address}}-{{item.s_name}}</view>
                    <view class="tenanone" v-if="item.type===2">合租-{{item.s_address}}-{{item.s_name}}</view>
                    <view class="tenanone" v-if="item.type===3">公寓-{{item.s_address}}-{{item.s_name}}</view>
                    <view class="tenantow">
                        {{item.area}}㎡-{{item.section}}居
                    </view>
                    <view class="tenanther">
                        {{item.lease_priec}}元/月
                    </view>
                </view>
            </scroll-view>
        </view>

        <u-gap height="70"></u-gap>
        <view class="safe-area-inset-bottom"></view>

        <view class="fixed">
            <view class="footer">
                <view class="btn-item" style="width: 150px" @click="telHandler">
                    <u-button text="立即联系" shape="circle" color="linear-gradient(to right, rgb(249, 176, 25), rgb(255, 124, 58))"></u-button>
                </view>
                <view class="btn-item" @click="favHandler">
                    <u-icon :customStyle="{paddingTop:20+'rpx'}" name="heart" color="#fa3534" size="26"></u-icon>
                    <text class="grid-text" style="color: #000;font-size: 12px;padding: 0">收藏</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name:"detail",
        data() {
            return {
                currentNum: 0,
                list:[],
                // content:"房源介绍:宜家家具、 实木床、洗衣机、冰箱、拎包入房源介绍:宜家家具、实木床、洗衣机、冰箱、拎包入住，装修精美，为您营造-一个温馨舒适的家。图片全部实住，装修精美，为您营造-一个温馨舒适的家.图片全部实图拍摄!小区介绍:贝尚湾位于松江区九亭黄金商业圈图拍摄！小区介绍:贝尚湾位于松江区九亭黄金商业圈的周边。附近有商场、超市、五星级酒店等。从小区步行的周边.附近有商场、超市、五星级酒店等.从小区步行可到商业街、地铁站、公交站，出行十分便利。周边介可到商业街、地铁站、公交站，出行十分便利",
                icon: 'heart',
                id: '',
                tel: '',
                info:{},
                linesname: '',
                stationname: '',
            }
        },
        onLoad(option){
            this.id = option.id;
            this.linesname = option.linesname;
            this.stationname = option.stationname;
            let params = {u_id: uni.getStorageSync('u_id'), h_id: option.id};
            uni.showLoading({title: '正在加载'});
            uni.$u.http.post('/api.php/UserClinet/house_info', params).then(res => {
                uni.hideLoading();
                this.info = res;
                this.list = res.room_img.concat(res.join_public_img);
                this.tel = res.tel;
            });
        },
        methods:{
            load1() {
                this.$refs.uReadMore1.init();
            },
            load2() {
                this.$refs.uReadMore2.init();
            },

            favHandler(){
                if (uni.getStorageSync('u_id')){
                    this.addOrDelFav();
                } else{
                    uni.navigateTo({url:'/pages/user/my/login'});
                }
            },
            addOrDelFav(){
                let data = {
                    u_id: uni.getStorageSync('u_id'),
                    h_id: this.id
                };
                let icon = '';
                if (this.icon === 'heart-fill'){
                    icon = 'heart';
                    data.type = 2;
                } else{
                    icon = 'heart-fill';
                    data.type = 1;
                }
                uni.$u.http.post('/api.php/UserClinet/house_wish', data).then(res => {
                    this.icon = icon;
                })
            },
            telHandler(){
                uni.makePhoneCall({
                    phoneNumber: this.tel.toString()
                });
            },

            swiperAction(e) {
                this.currentNum = e.current;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        background-color: #ffffff;
    }
    .content{
        padding: 20rpx;
    }

    ._type {
        width: 100%;
        height: 150rpx;
        margin-top: 40rpx;
        white-space: nowrap;
        border-bottom: 1px solid #eaeaea;
        border-top: 1px solid #eaeaea;
        overflow: hidden;
        .__bdi {
            width: 35%;
            margin-top: 40rpx;
            display: inline-block;
            overflow: hidden;
            padding-left: 25rpx;

            .price {
                font-size: 14px;
                color: #f17d30;
            }

            .types {
                font-size: 12px;
                color: #9c9c9c;
                margin-top: 5rpx;
            }
        }
    }

    .tags{
        @include flex;
        justify-content: flex-start;
        flex-wrap:wrap;
        margin: 10px 0;
    }

    .grid-text {
        font-size: 14px;
        color: #909399;
        padding: 10rpx 0 20rpx 0;
        box-sizing: border-box;
        text-align: center;
    }

    .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        @include flex;
        justify-content: center;

        &__text {
            color: #FFFFFF;
            font-size: 12px;
            text-align: center;
        }
    }

    .user{
        margin: 100rpx 20rpx;
        @include flex;
        justify-content: space-between;
        align-items: center;

        .info{
            @include flex;
            justify-content: flex-start;

            .name{
                margin-left: 30rpx;
                @include flex(column);
                align-items: center;
            }
        }
    }

    ._dbox {
        width: 100%;
        height: 400rpx;
        margin-top: 20rpx;
        white-space: nowrap;

        .__ruby {
            width: 320rpx;
            height: 400rpx;
            margin-right: 20rpx;
            display: inline-block;

            .Imges {
                width: 320rpx;
                height: 240rpx;
                background-color: red;
                border-radius: 12px;
                overflow: hidden;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .tenanone {
                width: 320rpx;
                margin-top: 10rpx;
                font-size: 14px;
                color: #000000;
                overflow-x: hidden;
                text-overflow: ellipsis;
            }
            .tenantow{
                font-size: 12px;
                color: #C9C9C9;
                margin-top: 10rpx;
            }
            .tenanther{
                font-size: 14px;
                color: #f17d30;
                margin-top: 10rpx;
            }
        }
    }

    .fixed{
        width: 100%;
        background-color: #ffffff;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1rpx solid #c0c4cc;
    }
    .footer{
        display: flex;
        flex-direction: row-reverse;
    }

    .grid-text {
        font-size: 14px;
        color: #909399;
        padding: 10rpx 0 20rpx 0rpx;
        box-sizing: border-box;
    }

    .btn-item {
        align-items: center;
        justify-content: center;
        flex-direction: column;
        box-sizing: border-box;
        display: flex;
        float: left;
        margin-right: 40rpx;
        margin-bottom: 0;
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
    }
</style>
